<template>
	<view>
    <view v-for="item in message" class="booklist" @click="todetails(item.BookId)">
      <image :src="item.BookCover"></image>
      <p class="bookname">{{item.BookName}}</p>
      <p class="author">{{item.BookAuthor}}</p>
      <p class="snycon">{{item.SnyCon}}</p>
    </view>
	</view>
</template>

<script>
	export default {
		name:"categoryDisplay",
    props:{
        message:Array
    },
		data() {
			return {

			};
		},
    methods:{
      todetails(bookid){
        console.log("--------------"+bookid)
        uni.navigateTo({
          url:"../../pages/details/details?BookId="+bookid
        })
      }
    },
    onLoad() {
      console.log(this.message)
    }

	}
</script>

<style scoped lang="scss">
  .booklist{
    height: 16vh;
    width: 100vw;
    padding-top: 1.2vh;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    image{
      width: 20vw;
      height: 14.6vh;
      float: left;
      box-shadow: 1px 3px 5px #999999;

    }
    p{
      flaot:left;
      margin-left: 25vw;
    }
    .bookname{
      font-weight: 600;
    }
    .author{
      height: 4vh;
      line-height: 4vh;
      font-size: 12px;
    }
    .snycon{
      font-size: 12px;
      color: rgba(0,0,0,0.5);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp:3;
      font-size: 25rpx;
      -webkit-box-orient:vertical;
      text-indent:1em;
    }
  }
</style>
